<template>
    <div class="">
      <div class="html-img" id="big">
        <img class="img-result"  v-if="!addName" :src="imgSrc" alt="">
        <div id="html-img" v-if="addName">
        <!-- <div id="html-img" v-if="true"> -->
          <div class="wrap">
            <div class="box">
              <div class="top">
                <div class="time">
                <div>
                  <span>日期</span>
                  {{date}}
                </div>
                <div>
                  <span>时间</span>
                  {{time}}
                </div>
              </div>
              <h1>{{userName}}恭喜你在安全用药测试中答对{{rightNum}}题</h1>
              <h2>打败了全国<span>{{scale}}%</span>用户</h2>
              <div class="title">
                <h3>{{callName}} </h3>
                <img src="static/img/back.png" alt="">
              </div>
              <div class="people">
                <img :src="levelImg" id="img" alt="">
              </div>
              <div class="tips-doctor">*请在医生的指导下安全用药</div>
              </div>
              <div class="footer">
                <div class="middle clearfix">
                  <img src="static/img/logo.png" alt="">
                  <div class="er-code">
                    <div>
                      <p>
                        <span style="display: block;">这些常用药</span>
                        <span>99%的人都用错了</span>
                        <span style="display: block;">测一测你都用对了么？</span>
                        <span style="display: block;font-weight: bold; margin-top: 0.04rem;">长按图片保存分享结果</span>
                      </p>
                      <img src="static/img/code.png" alt="">
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="bts">
          <button @click="showMask = true">分享给好友</button>
          <button @click="downLoad">下载星诊所APP</button>
        </div>
      </div>
      <div class="mask" @click="hideMask" v-if="showMask"></div>
      <div class="mask-box" v-if="showMask">
        <div class="box">
          <div class="img">
            <img src="../../../assets/img/share_people.png" alt="">
            <p>“分享朋友圈，<br>
              帮助朋友提高安全用药意识”</p>
          </div>
          <div class="bts">
            <button @click="again">再玩一次</button>
            <button @click="downLoad">下载星诊所APP</button>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
export { default } from "./index";
</script>
<style lang="less" scoped>
@import "./index.less";
</style>
<style lang="less">
@media (device-width: 320px) and (-webkit-min-device-pixel-ratio: 2) {
  #big {
    .box {
      .top {
        .time {
          font-size: 0.12rem;
          div {
            span {
              right: 5px;
            }
          }
        }
        h1 {
          font-size: 0.12rem;
        }
        h2 {
          font-size: 0.24rem;
        }
      }
      .footer {
        .middle {
          width: 96%;
          & > img {
            width: 0.8rem;
          }
        }
        .er-code div p {
          font-size: 0.1rem;
        }
      }
      .people {
        img {
          margin-top: 0.3rem;
        }
      }
    }
  }
}
</style>

